import Vue from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router'
// 导入 vant/index.js 让里面的代码执行，执行完成注册组件即可
import './vant'

Vue.config.productionTip = false

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  strict: true,
  state: {
    count: 0,
    list: [1,2,3,4,5,6,7,8,9,10],
    historyList:[],
    token: '666',
    productName:'小米 11',
    productPrice: 3999,
    productQuantity: 1
  },
  mutations: {
    increment(state, data) {
      if (data) {
        state.count += data
      }else {
        state.count ++
      }
    },
    addHistory(state, data) {
      if (state.historyList.indexOf(data) === -1) {
        state.historyList.unshift(data)
      }
    },
    restoreHistory(state, data) {
      state.historyList = data
    },
    setToken(state, data) {
      state.token = data
    },
    addXiaoMi(state) {
      state.productQuantity++
    }
  },
  actions:{
    // actions 依旧是一个对象
    // 里面的每个属性都是一个函数
    asyncIncrementCount({commit}, data) {
      // 在这里可以接受两个数据
      // 一个 context 上下文其实就是当前仓库本身
      // 如果需要修改 state 应该通过 mutations
      setTimeout(() => {
        commit('increment', data)
      }, 1000);
    },
    login(context, data) {
      // 伪代码
      axios({
        url,
        method,
        data
      }).then(res=>{
        // 添加到 state
        context.commit('setToken', res.data.token)
      })
    }
  },
  // 希望使用 getters 得到存在于 list 当中大于5的数字
  getters: {
    // 每个属性都是一个函数
    // 在这里可以得到当前的 state 对象
    numMoreThanFive: state => state.list.filter(item=>item >= 5),
    totalPrice: state => state.productPrice * state.productQuantity,
    // 因为每个 getters 都可以得到当前的 state 对象, 里面其实也包含了子模块的数据,
    // 可以利用他进行快速的数据获取
    token: state => state.user.token,
    appName: state => state.setting.appName
  },
  modules: {
    // 模块配置是一个对象, 里面的每个属性都是一个独立模块
    user: {
      // 声明了使用命名空间
      namespaced: true,
      // 每个子模块都是一个对象, 可以自己拥有state,mutations,actions,getters 的独立属性
      state: {
        token: '999'
      },
      mutations: {
        setUserInfo(state, data) {
          state.token = data
        } 
      }
    },
    setting: {
      state: {
        appName: '黑马头条项目'
      }
    }
  }
})

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

new Vue({
  // 路由
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')
